<style scoped>
 ::-webkit-scrollbar {
    display: none;
}

html,
body {
    overflow: hidden;
    height: 100%;
    margin: 0;
}

.el-row {
    margin-bottom: 20px;
}

.el-row .el-col:last-child {
    margin-bottom: 0;
}

.el-col {
    border-radius: 4px;
}

.bg-purple-dark {
    background: #99a9bf;
}

.bg-purple {
    background: #d3dce6;
}

.bg-purple-light {
    background: #e5e9f2;
}

.grid-content {
    border-radius: 4px;
    min-height: 36px;
}

.row-bg {
    padding: 10px 0;
    background-color: #f9fafc;
}

.pro .title {
    font-weight: bold;
    font-size: 18px;
}

.pro .tongji {
    padding: 15px;
}

.pro .el-date-editor .el-range__close-icon {
    width: 20px !important;
}

.pro .el-input__inner {
    /* width: 80% !important; */
}

.pro .el-range-editor.el-input__inner {
    width: 50% !important;
    padding: 3px 7px;
    margin-right: 2%;
}

.pro .el-date-editor .el-range__close-icon {
    width: 15px;
}

.pro .el-radio-group {
    width: 45%;
    margin-bottom: 4px;
    box-sizing: border-box;
    /* height: 36px; */
}

.pro .el-radio-button--medium .el-radio-button__inner {}

.pro .bg-white1 {
    margin-bottom: 20px;
}
</style>
<style>
.pro .el-radio-button--medium .el-radio-button__inner {
    padding: 11px 14px !important;
}

.pt10 {
    padding-top: 10px;
}

.pt15 {
    padding-top: 15px;
}

.pb15 {
    padding-bottom: 15px;
}

.pb20 {
    padding-bottom: 20px;
}
</style>

<template>
<div class="pro">
    <el-row :gutter="20">
        <template v-for="(item,index) in data">
            <el-col :span="8" class="bg-white1">
                <div class="block grid-content tongji bg-white">
                    <span class="demonstration block title pb15">{{item.title}}</span>
                    <el-date-picker v-model="shuju[index]['time']" type="daterange" format="yyyy/MM/dd" value-format="yyyy/MM/dd" :lg="16" range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期" @change="changechart('tu'+index,item.id)" :clearable="false">
                    </el-date-picker>
                    <el-radio-group v-model="shuju[index]['timetype']" size="medium" @change="changechart('tu'+index,item.id)">
                        <el-radio-button label="周">周</el-radio-button>
                        <el-radio-button label="月">月</el-radio-button>
                        <el-radio-button label="日">日</el-radio-button>
                    </el-radio-group>
                </div>
                <div :id="'tu'+index" class="bg-white" style="height:400px;"></div>
            </el-col>
        </template>
        <!-- <el-col :span="8" class="bg-white1">
            <div class="block grid-content tongji bg-white">
                <span class="demonstration block title pb15">已入驻产品数</span>
                <el-date-picker v-model="proview.time" type="daterange" format="yyyy/MM/dd" value-format="yyyy/MM/dd" :lg="16" range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期" @change="changechart('proview','browse')" :clearable="false">
                </el-date-picker>
                <el-radio-group v-model="proview.timetype" size="medium" @change="changechart('proview','browse')">
                    <el-radio-button label="周">周</el-radio-button>
                    <el-radio-button label="月">月</el-radio-button>
                    <el-radio-button label="日">日</el-radio-button>
                </el-radio-group>
            </div>
            <div id="proview" class="bg-white"></div>
        </el-col>
        <el-col :span="8" class="bg-white1">
            <div class="block grid-content  tongji bg-white">
                <span class="demonstration block title pb15">已发布应用数</span>
                <el-date-picker v-model="proshare.time" type="daterange" format="yyyy/MM/dd" value-format="yyyy/MM/dd" :lg="16" range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期" @change="changechart('proshare','share')">
                </el-date-picker>
                <el-radio-group v-model="proshare.timetype" size="medium" @change="changechart('proshare','share')">
                    <el-radio-button label="周">周</el-radio-button>
                    <el-radio-button label="月">月</el-radio-button>
                    <el-radio-button label="日">日</el-radio-button>
                </el-radio-group>
            </div>
            <div id="proshare" class="bg-white"></div>
        </el-col>
        <el-col :span="8" class="bg-white1">
            <div class="block grid-content  tongji bg-white">
                <span class="demonstration block title pb15">关注人数</span>
                <el-date-picker v-model="proget.time" type="daterange" format="yyyy/MM/dd" value-format="yyyy/MM/dd" :lg="16" range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期" @change="changechart('proget','favorite')">
                </el-date-picker>
                <el-radio-group v-model="proget.timetype" size="medium" @change="changechart('proget','favorite')">
                    <el-radio-button label="周">周</el-radio-button>
                    <el-radio-button label="月">月</el-radio-button>
                    <el-radio-button label="日">日</el-radio-button>
                </el-radio-group>
            </div>
            <div id="proget" class="bg-white"></div>
        </el-col> -->
        <!-- <el-col :span="8" class="bg-white1">
            <div class="block grid-content  tongji bg-white">
                <span class="demonstration block title pb15">关联专家数量</span>
                <el-date-picker v-model="zjlink.time" type="daterange" format="yyyy/mm/dd" value-format="yyyy/mm/dd" :lg="16" range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期" @change="changechart('zjlink','expert')">
                </el-date-picker>
                <el-radio-group v-model="zjlink.timetype" size="medium" @change="changechart('zjlink','expert')">
                    <el-radio-button label="周">周</el-radio-button>
                    <el-radio-button label="月">月</el-radio-button>
                    <el-radio-button label="日">日</el-radio-button>
                </el-radio-group>
            </div>
            <div id="zjlink" class="bg-white"></div>
        </el-col>
        <el-col :span="8" class="bg-white1">
            <div class="block grid-content  tongji bg-white">
                <span class="demonstration block title pb15">关联应用数量</span>
                <el-date-picker v-model="applink.time" type="daterange" format="yyyy/mm/dd" value-format="yyyy/mm/dd" :lg="16" range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期" @change="changechart('applink','app')">
                </el-date-picker>
                <el-radio-group v-model="applink.timetype" size="medium" @change="changechart('applink','app')">
                    <el-radio-button label="周">周</el-radio-button>
                    <el-radio-button label="月">月</el-radio-button>
                    <el-radio-button label="日">日</el-radio-button>
                </el-radio-group>
            </div>
            <div id="applink" class="bg-white"></div>
        </el-col> -->
    </el-row>
</div>
</template>



<script>
import {
    Row,
    Col,
    DatePicker,
    RadioGroup,
    RadioButton
} from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css';
export default {
    data() {
        return {
            data:[],
            y6: '',
            tabPosition: 'look',
            shuju:[],
            proview:{
                time:[],
                timetype:'周',
            },
            proshare:{
                time:[],
                timetype:'周',
            },
            proget:{
                time:[],
                timetype:'周',
            },
            zjlink:{
                time:[],
                timetype:'周',
            },
            applink:{
                time:[],
                timetype:'周',
            },
        }
    },
    mounted() {
        // this.draw('proget');
        // this.draw('proshare');
        // this.draw('proview');
        // this.draw('prolink');
    },
    components: {
        ElCol: Col,
        ElRow: Row,
        ElDatePicker: DatePicker,
        ElRadioGroup: RadioGroup,
        ElRadioButton: RadioButton,
    },
    created(){
        // this.getAllData()
    },
    mounted(){
        this.getAllData();
    },
    methods: {
        draw(id,data) {
            if(data.length>0){
                var chart = new G2.Chart({
                container: id,
                height: 400,
                forceFit: true,
                padding: [30, 30, 50, 40],
                });
                chart.source(data);
                chart.scale('y', {
                    min: 0
                });
                chart.scale('x', {
                    range: [0, 1]
                });
                chart.tooltip({
                    crosshairs: {
                        type: 'line'
                    }
                });
                chart.line().position('x*y');
                chart.point().position('x*y').size(4).shape('circle').style({
                    stroke: '#fff',
                    lineWidth: 1
                });
                chart.render();
                // Ele.$message.success('操作成功');
                }
        },
        getAllData(){
            let timeend = new Date().getFullYear()+'/'+(new Date().toLocaleDateString().split('/')[1]<10?'0'+new Date().toLocaleDateString().split('/')[1]:new Date().toLocaleDateString().split('/')[1])+'/01';
            let timestart = "";
            let nowtime = new Date().toLocaleDateString().split('/');
            if(nowtime[1]<10){
                if(nowtime[1]==1){
                    timestart = nowtime[0]*1-1+'/12/01';
                }else{
                    timestart = nowtime[0]+'/'+(nowtime[1]<10?'0'+(nowtime[1]*1-1):nowtime[1]*1-1)+'/01';
                }
            }
            let data={
                timestart:timestart,
                // timestart:'2018/06/01',
                timeend:timeend,
                // timeend:'2018/07/01',
                type:'all',
                timetype:'week',
            };
            let _this = this;
            new Promise((rev,rej)=>{
                API.get('/company/statistics/',{
                    params:data
                }).then(res=>{
                    _this.data = res;
                    res.map((item,index)=>{
                        _this.shuju.push({
                            time:[timestart,timeend],
                            timetype:item.timetype,
                        })
                    })
                    return res;
                // })
                }).then((res)=>{
                    _this.$nextTick(()=>{
                        res.map((item,index)=>{
                            _this.draw('tu'+index,item.data);
                        })
                    })
                }).catch(error=>{
                    rej(error)
                })
            })
        },
        changechart(dom,type){
            let _this = this;
            setTimeout(function(){
                let data= {
                    timestart:_this.shuju[dom.split('tu')[1]].time[0],
                    timeend:_this.shuju[dom.split('tu')[1]].time[1],
                    timetype:_this.shuju[dom.split('tu')[1]].timetype=="周"?'week':_this.shuju[dom.split('tu')[1]].timetype=="月"?'month':_this.shuju[dom.split('tu')[1]].timetype=="日"?'day':'',
                    type:type
                }
                API.get('/company/statistics/',{
                    params:data
                }).then(res=>{
                    document.getElementById(dom).innerHTML="";
                    _this.draw(dom,res[0].data)
                })
            },3000)
        }
    }
}
</script>